﻿<%@ page title="Payment Page - TestTravel" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="_Default, App_Web_ljband1y" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script>
        $(document).ready(function () {
            $("#cc_visa").click(function () {
                restoreBlur();
                $("#cc_visa").css("opacity", "1");
            });
            $("#cc_master").click(function () {
                restoreBlur();
                $("#cc_master").css("opacity", "1");
            });
            $("#cc_cirrus").click(function () {
                restoreBlur();
                $("#cc_cirrus").css("opacity", "1");
            });
            $("#cc_amex").click(function () {
                restoreBlur();
                $("#cc_amex").css("opacity", "1");
            });
            $("#option_paypal").change(function () {
                $("#creditcard_info").fadeOut(function(){
                    $("#cash").fadeOut(function(){
                        $("#paypal").slideDown();
                    });
                });
            });
            $("#option_cc").change(function () {
                $("#paypal").fadeOut(function () {
                    $("#cash").fadeOut(function () {
                        $("#creditcard_info").slideDown();
                    });
                });
            });
            $("#option_cash").change(function () {
                $("#creditcard_info").fadeOut(function () {
                    $("#paypal").fadeOut(function () {
                        $("#cash").slideDown();
                    });
                });
            });
            
            payOptionCheck();
            creditcardTypeCheck();
        });

        function payOptionCheck() {
            var pay_option = $("[id$=_hiddenPaymentOption]").val();
            switch (pay_option) {
                case "0":
                    $("#option_cc").click();
                    break;
                case "1":
                    $("#option_cash").click();
                    break;
                case "2":
                    $("#option_paypal").click();
                    break;
            }
        }

        function creditcardTypeCheck() {
            var cc_type = $("[id$=_hiddenCCType]").val();
            switch (cc_type) {
                case "0":
                    $("#cc_visa").click();
                    break;
                case "1":
                    $("#cc_master").click();
                    break;
                case "2":
                    $("#cc_cirrus").click();
                    break;
                case "3":
                    $("#cc_amex").click();
                    break;

            }
        }

        function restoreBlur() {
            $("#cc_visa").css("opacity", "0.3");
            $("#cc_master").css("opacity", "0.3");
            $("#cc_cirrus").css("opacity", "0.3");
            $("#cc_amex").css("opacity", "0.3");
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">    
    <asp:PlaceHolder ID="placePaymentDetails" runat="server">
        <div class="page_title">
            Payment Page
        </div>
        <div class="section">
            <div class="section_header">
                Booking Reference
            </div>
            <div class="section_content">
                <asp:Label ID="lblBookingRef" runat="server" Text="SGSINFT0079935" CssClass="label_booking_ref" />
            </div>
        </div>
        <div class="section">
            <div class="section_header">
                Transaction Summary
            </div>
            <div class="section_content">
                <table id="transactions" class="transactions">
                    <tr>
                        <th>Item</th>
                        <th>Currency</th>
                        <th>Amount</th>
                        <th>Transaction Date</th>
                    </tr>
                    <asp:Repeater ID="ItemRepeater" runat="Server" onitemdatabound="ItemRepeater_ItemDataBound">
                        <HeaderTemplate>                                
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>
                            <td>
                                <asp:Label ID="lblItemDetail" runat="server" />
                            </td>
                            <td>
                                <asp:Label ID="lblCurrency" runat="Server" />
                            </td>
                            <td>
                                <asp:Label ID="lblAmount" runat="Server" />
                            </td>
                            <td>
                                <asp:Label ID="lblDate" runat="server" />
                            </td>                            
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>                                
                        </FooterTemplate>
                    </asp:Repeater>
                    <tr>
                        <td colspan="4">
                            <hr />
                        </td>
                    </tr>
                    <tr>
                            <td>
                                Outstanding amount
                            </td>
                            <td>
                                <asp:Label ID="lblFinalCurrency" runat="Server" />
                            </td>
                            <td>
                                <asp:Label ID="lblFinalAmount" runat="Server" />
                            </td>
                            <td>
                            </td>                            
                            </tr>
                </table>
            </div>
        </div>
        <div class="section">
            <div class="section_header">
                Payment Information
                <asp:HiddenField id="hiddenPaymentOption" runat="server" />
            </div>
            <div class="section_content">
                <div>
                    <b>Payment mode</b>
                </div>
                <div style="margin-left:20px;margin-top:20px;">
                    <div class="payment_option"><input id="option_cc" type="radio" name="groupPaymentOptions" value="creditcard" checked="1"/>Credit Card</div>
                    <div class="payment_option"><input id="option_cash" type="radio" name="groupPaymentOptions" value="cash" />Cash Voucher/Discount Code</div>
                    <div class="payment_option"><input id="option_paypal" type="radio" name="groupPaymentOptions" value="paypal" />PayPal</div>
                </div>
                <br /><hr /><br />
                <div id="creditcard_info">
                    <asp:HiddenField ID="hiddenCCType" runat="server" />
                    <div>
                        <b>Credit Card Details</b>
                    </div>
                    <div class="info_row">
                        <div class="input_desc">
                            Credit Card Type
                        </div>
                        <div class="creditcard_types">
                            <a id="cc_visa">
                                <img src="./Images/CreditCard_Visa.png" title="Visa" />
                            </a>
                             <a id="cc_master">
                                <img src="./Images/CreditCard_MasterCard.png" title="MasterCard" />
                            </a>
                             <a id="cc_cirrus">
                                <img src="./Images/CreditCard_Cirrus.png" title="Cirrus" />
                            </a>
                             <a id="cc_amex">
                                <img src="./Images/CreditCard_Amex.png" title="Amex"/>
                            </a>
                        </div>
                    </div>
                    <div class="info_row">
                        <div class="input_desc">
                            Cardholder's Name
                        </div>
                        <div class="text_input">
                            <asp:TextBox ID="txtCardholderName" runat="server" CssClass="long_textinput" autocomplete="No" />
                        </div>
                        <div class="input_desc">
                            Expiry Date
                        </div>
                        <div class="text_input">
                           <asp:TextBox ID="txtMonth" runat="server" MaxLength="2" Width="20px"/> / 
                           <asp:TextBox ID="txtYear" runat="server" MaxLength="4" Width="40px"/>
                           <small>e.g.: 04 / 2015</small>
                        </div>
                    </div>
                    <div class="info_row">
                        <div class="input_desc">
                            Credit Card Number
                        </div>
                        <div class="text_input">
                            <asp:TextBox ID="txtCreditCardNumber" runat="server" CssClass="long_textinput" />
                        </div>
                        <div class="input_desc">
                            CVV/CVV2
                        </div>
                        <div class="text_input">
                            <asp:TextBox ID="txtCVV" runat="server" width="50px" />
                        </div>
                    </div>
                    <div class="info_row">
                        <div class="input_desc">
                            Card Issuance Bank
                        </div>
                        <div class="text_input">
                            <asp:TextBox ID="txtCardIssueBank" runat="server" CssClass="long_textinput" />
                        </div>
                    </div>
                    <div class="info_row">
                        <div class="input_desc">
                            Card Issuance Country
                        </div>
                        <div class="text_input">
                            <asp:DropDownList id="listIssueCountry" runat="server" Width="225px">
                            </asp:DropDownList>
                        </div>
                    </div>
                    <br /><hr /><br />
                    <div>
                        <b>Contact Details</b>
                    </div>
                    <div class="info_row">
                        <div class="input_desc">
                            Phone Number
                        </div>
                        <div class="text_input">
                            <asp:TextBox ID="txtPhone" runat="server" CssClass="long_textinput" />
                        </div>
                    </div>
                    <div class="info_row" style="vertical-align:top;">
                        <div class="input_desc" style="vertical-align:top;padding-top:4px;">
                            Billing Address
                        </div>
                        <div class="text_input">
                            <asp:TextBox ID="txtBillingAddress" runat="server" CssClass="long_textinput" TextMode="MultiLine"  spellcheck="false" />
                        </div>
                        <div class="input_desc" style="vertical-align:top;padding-top:4px;">
                            Postal Code
                        </div>
                        <div class="text_input" style="vertical-align:top;">
                            <asp:TextBox ID="txtPostalCode" runat="server" Width="80px" />
                        </div>
                    </div>
                    <div class="info_row">
                        <div class="input_desc">
                            City
                        </div>
                        <div class="text_input">
                            <asp:TextBox ID="txtCity" runat="server" CssClass="long_textinput" />
                        </div>
                    </div>
                    <div class="info_row">
                        <div class="input_desc">
                            Country
                        </div>
                        <div class="text_input">
                            <asp:DropDownList id="listCountry" runat="server"  Width="225px">
                            </asp:DropDownList>
                        </div>
                    </div>
                </div>
                <div id="paypal" style="display:none;">
                    <div>
                        <b>Pay by PayPal</b>
                    </div>
                    <div style="margin-left:20px;margin-top:20px;">
                        Please click 'Continue' to go to PayPal payment page.
                    </div>
                </div>
                <div id="cash" style="display:none;">
                    <div>
                        <b>Cash Voucher / Discount Code</b>
                    </div>
                    <div style="margin-left:20px;margin-top:20px;">
                        Please enter your Cash Voucher number or Discount Code: <input type="text" name="cash_code" value="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="buttons">
                <a class="style_button" title="Continue" href="./#">Continue</a>
                <a class="style_button" title="Continue" href="./#">&nbsp;&nbsp;Cancel&nbsp;&nbsp;</a>
            </div>
        </div>
    </asp:PlaceHolder>
    <asp:PlaceHolder ID="placeNotFound" runat="server">
        <div class="section"  style="margin:200px 0;text-align:center;">
            <span style="color:#666;font-family:'Lucida Sans Unicode';">Sorry, we cannot find any information about this payment.</span>
        </div>
    </asp:PlaceHolder>
</asp:Content>

